<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.css"/>
<script src="js/angular.js"></script>
<script src="js/a8.js"></script>

</head>
<body>
<div class="container" ng-app="myApp" ng-controller="cartController" >
	<table class="table"  ng-show="cart.length">
		<thead>
			<tr>
				<th>产品编号</th>
				<th>产品名字</th>
				<th>购买数量</th>
				<th>产品单价</th>
				<th>产品总价</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in cart">
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
				<td>
					<button type="button" class="btn btn-primary btn-xs" ng-click="reduce(item.id);">-</button>
					<input type="text" value="{{item.quantity}}" ng-model="item.quantity"/>
					<button type="button" class="btn btn-primary btn-xs" ng-click="add(item.id);">+</button>
				</td>				
				<td>{{item.price}}</td>
				<td>{{item.price*item.quantity}}</td>
				<td><button type="button" class="btn btn-danger btn-xs" ng-click="remove(item.id)">移除</button></td>
			</tr>
			<tr>
				<td>总购买价:</td>
				<td>{{totalPrice()}}</td>
				<td>总数:</td>
				<td>{{totalQuantity()}}</td>
				<td colspan="2"><button type="button" class="btn btn-danger btn-xs" ng-click="cart={}">移除</button></td>
			</tr>
		</tbody>
	</table>
	
	<p ng-show ="!cart.length">您的购物车为空</p>
</div>
</body>
</html>